import styles from './index.less';
import { menuIcon1, menuIcon2 } from '../img/urlImg';
import { useState, useRef } from 'react';
import ProteinCategoryList from './components/ProteinCategoryList';
import CanvasContainer, {
  CanvasContainerRef,
} from './components/CanvasContainer';
import { DraggableItem } from './components/CanvasContainer';
import ElementPropertiesPanel from './components/ElementPropertiesPanel/index';

export default function IndexPage() {
  const [menuItems, setMenuItems] = useState([
    {
      key: 1,
      name: '素材',
      imgUrl: menuIcon1,
      isClick: true,
    },
    {
      key: 2,
      name: '模板',
      imgUrl: menuIcon2,
      isClick: false,
    },
  ]);

  // 当前选中的元素
  const [selectedElement, setSelectedElement] = useState<DraggableItem | null>(
    null,
  );
  // 是否显示元素属性面板
  const [showPropertiesPanel, setShowPropertiesPanel] = useState(false);
  // CanvasContainer引用
  const canvasContainerRef = useRef<CanvasContainerRef | null>(null);
  // 保存素材分类的选中状态，避免切换面板时重置
  const [activeCategory, setActiveCategory] = useState<any>({});

  // 处理元素选中事件
  const handleElementSelect = (element: DraggableItem | null) => {
    setSelectedElement(element);
    setShowPropertiesPanel(element !== null);
  };

  // 处理元素更新事件
  const handleElementUpdate = (element: DraggableItem) => {
    setSelectedElement(element);
  };

  // 更新元素属性
  const updateElementProperties = (properties: Partial<DraggableItem>) => {
    if (selectedElement && canvasContainerRef.current) {
      // 调用CanvasContainer的更新方法
      canvasContainerRef.current.updateElementProperties(properties);
    }
  };

  return (
    <div className={styles.container}>
      {/* 左侧区域 - 宽度不固定，根据内容自适应 */}
      <div className={styles.leftMenu}>
        <ul
          style={{
            listStyle: 'none',
            padding: 0,
            margin: 0,
            color: 'rgba(255, 255, 255, 1)',
          }}
        >
          {menuItems?.map((item, index) => (
            <li
              key={index}
              className={
                item?.isClick ? styles.menuItemsActive : styles.menuItems
              }
              onClick={() => {
                const newMenuItems = menuItems?.map((i) => {
                  if (item?.key === i?.key) {
                    i.isClick = true;
                  } else {
                    i.isClick = false;
                  }
                  return i;
                });
                setMenuItems(newMenuItems as any);
              }}
            >
              <img src={item?.imgUrl} alt="" />
              {item?.name}
            </li>
          ))}
        </ul>
      </div>

      <div className={styles.leftMenuList}>
        {showPropertiesPanel ? (
          <ElementPropertiesPanel
            element={selectedElement}
            onUpdateProperties={updateElementProperties}
          />
        ) : menuItems?.find((i) => i.isClick)?.key === 1 ? (
          <ProteinCategoryList
            activeCategory={activeCategory}
            setActiveCategory={setActiveCategory}
          />
        ) : (
          <div>模板</div>
        )}
      </div>

      {/* 右侧区域 - 占满剩余空间 */}
      <div
        style={{
          flex: 1, // 占满剩余空间
          padding: '16px',
          boxSizing: 'border-box',
          overflow: 'hidden', // 改为hidden，确保内容不会被截断
          height: '100%',
          minHeight: 'calc(100vh - 64px)', // 确保有足够的高度
        }}
      >
        <CanvasContainer
          ref={canvasContainerRef}
          onElementSelect={handleElementSelect}
          onElementUpdate={handleElementUpdate}
        />
      </div>
    </div>
  );
}
